<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="search-input-wrapper">
				<text class="search-icon">🔍</text>
				<input 
					class="search-input" 
					v-model="searchKeyword" 
					placeholder="搜索商品名称" 
					@input="onSearchInput"
				/>
				<text v-if="searchKeyword" class="clear-icon" @click="clearSearch">✕</text>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 左侧分类列表 -->
			<view class="category-sidebar">
				<!-- 加载状态 -->
				<view v-if="loading" class="loading-container">
					<text class="loading-text">加载中...</text>
				</view>
				
				<!-- 空状态 -->
				<view v-else-if="flatCategories.length === 0" class="empty-container">
					<text class="empty-text">暂无分类</text>
				</view>
				
				<!-- 分类列表 -->
				<template v-else>
					<view 
						class="category-item" 
						v-for="(category, index) in displayCategories" 
						:key="category.id || index"
						:class="{ 
							active: selectedCategoryId === category.id,
							'has-children': category.category && category.category.children && category.category.children.length > 0
						}"
						:style="{ paddingLeft: (category.level * 10 + 5) + 'px' }"
						@click="handleCategoryClick(category)"
					>
						<view class="category-content">
							<text class="category-name">{{ category.name }}</text>
						</view>
					</view>
				</template>
			</view>
			
			<!-- 右侧商品区域 -->
			<view class="product-area" v-if="flatCategories.length > 0">
				<!-- 当前分类标题 -->
				<view class="category-header">
					<view class="category-title-section" @click="modifyCategory">
						<text class="current-category">{{ currentCategoryName }}</text>
						<text class="edit-icon">
							<u-icon name="edit-pen" size="26" color="#ff4069"></u-icon>
						</text>
					</view>
					<text class="count-text">商品数:{{ getCurrentCategoryProductCount() }}</text>
				</view>
				
			<!-- 商品列表 -->
			<view class="product-list" v-if="getCurrentCategoryProducts().length > 0">
			<view 
				class="product-item" 
				v-for="(product, index) in getCurrentCategoryProducts()" 
				:key="product.id"
				:class="{ 
					'moving': movingProductId === product.id,
					'moving-up': movingProductId === product.id && movingDirection === 'up',
					'moving-down': movingProductId === product.id && movingDirection === 'down'
				}"
			>
						<image class="product-image" v-if="product.image" :src="product.image" mode="aspectFill"></image>
						<image class="product-image" style="border:1px solid #f0f0f0;" v-else src="../common/images/noImage.png" mode="aspectFill"></image>
						<view class="product-info">
							<text class="product-name" @click="modifyProduct(product)">
								{{ product.name }}
								<text class="product-faceValue" v-if="product.faceValue">{{'/' +  product.faceValue }}</text>
								<u-icon name="edit-pen" size="26" color="#ff4069"></u-icon>
							</text>
							<text class="product-stats">已售{{ product.sold }} 库存:{{ product.stock }}</text>
							<text class="product-costPrice" v-if="product.costPrice">¥{{ product.costPrice }}</text>
							<text class="product-price">¥{{ product.price }}
								<text class="product-specification" v-if="product.specification">/{{ product.specification }}</text>
							</text>
						</view>
						<view class="product-actions">
							<view 
								class="action-btn" 
								v-if="index > 0"
								@click="moveProductUp(index,product.id)"
							>
								<text class="btn-text">上移</text>
							</view>
							<view 
								class="action-btn" 
								v-if="index < getCurrentCategoryProducts().length - 1"
								@click="moveProductDown(index,product.id)"
							>
								<text class="btn-text">下移</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 添加商品按钮 -->
				<view class="add-product-btn" @click="addProduct">
					<text class="add-icon">+</text>
					<text class="add-text">添加商品</text>
				</view>
				<!-- 删除分类按钮 -->
				<view class="add-product-btn" style="margin-top: 10px;" @click="deleteCategory" v-if="getCurrentCategoryProductCount() == 0 && selectedCategory > 0">
					<text class="add-icon">×</text>
					<text class="add-text">删除分类</text>
				</view>
			</view>
		</view>
		
		<!-- 无分类时的提示 -->
		<view v-if="flatCategories.length === 0" class="no-category-tip">
			<text class="tip-text">暂无分类数据，请先添加分类</text>
		</view>
		
		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<view class="action-btn-left" @click="goToCategoryManagement">
				<text class="action-text">分类管理</text>
			</view>
			<view class="action-btn-right" @click="addProduct">
				<text class="action-text">添加商品</text>
			</view>
		</view>
		
		<!-- 底部指示器 -->
		<view class="home-indicator"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedCategory: 0,
			selectedCategoryId: null, // 选中的分类ID
			showDeleteModal: false,
			categories: [], // 树形结构的分类数据
			flatCategories: [], // 扁平化的分类列表（用于显示和选择）
			loading: false,
			products: {}, // 改为空对象，从接口获取数据
			productsList: [], // 存储所有商品列表
			movingProductId: null, // 正在移动的商品ID，用于动画效果
			movingDirection: '', // 移动方向：'up' 或 'down'
			expandedCategories: {}, // 展开状态：{ categoryId: true/false }
			searchKeyword: '' // 搜索关键词
		}
	},
	computed: {
		// 扁平化的分类列表（根据展开状态动态更新）
		displayCategories() {
			return this.renderTree(this.categories, 0)
		},
		// 当前选中的分类名称
		currentCategoryName() {
			const category = this.flatCategories.find(cat => cat.id === this.selectedCategoryId)
			return category ? category.name : '请选择分类'
		}
	},
	onLoad() {
		// 页面初始化，不在这里加载数据，统一在 onShow 中加载
	},
	onShow() {
		// 页面显示时加载数据（包括首次进入和从其他页面返回）
		this.loadCategories()
	},
	methods: {
		// 加载分类列表
		loadCategories() {
			this.loading = true
			
			// 使用新的 treeData 接口，返回的已经是树形结构
			this.$u.api.productCategory.treeData().then(res => {
				this.loading = false
				
				if (res && Array.isArray(res) && res.length > 0) {
					// treeData 接口直接返回树形结构数组
					this.categories = res || []
					// 初始时完全展开所有分类（扁平化所有数据）
					this.flatCategories = this.flattenTree(res)
					console.log('获取分类列表成功:', this.categories)
					console.log('扁平化分类列表:', this.flatCategories)
					
					// 如果没有选中的分类，默认选中第一个
					if (this.flatCategories.length > 0 && !this.selectedCategoryId) {
						this.selectedCategoryId = this.flatCategories[0].id
						this.selectedCategory = 0
					}
					
					// 加载分类成功后，加载商品列表
					this.loadProducts()
				} else if (res && res.list && res.list.length > 0) {
					// 兼容旧接口格式
					this.categories = res.list || []
					this.flatCategories = res.list || []
					// 加载分类成功后，加载商品列表
					this.loadProducts()
				} else {
					this.categories = []
					this.flatCategories = []
				}
			}).catch(err => {
				this.loading = false
				console.error('获取分类列表失败:', err)
				uni.showToast({
					title: '获取分类列表失败',
					icon: 'none'
				})
			})
		},
		
		// 将树形结构扁平化（用于显示和选择，根据展开状态）
		renderTree(nodes, level) {
			const result = []
			if (!nodes || nodes.length === 0) {
				return result
			}
			
			nodes.forEach(node => {
				result.push({
					id: node.id,
					name: node.name,
					parentCode: node.parentCode || '0',
					sort: node.sort,
					status: node.status,
					level: level,
					category: node // 保留原始节点引用
				})
				
				// 如果有子节点且已展开，递归渲染子节点
				if (node.children && node.children.length > 0 && this.expandedCategories[node.id]) {
					result.push(...this.renderTree(node.children, level + 1))
				}
			})
			return result
		},
		
		// 将树形结构完全扁平化（用于初始化和统计）
		flattenTree(tree, result = [], level = 0) {
			tree.forEach(node => {
				result.push({
					id: node.id,
					name: node.name,
					parentCode: node.parentCode || '0',
					sort: node.sort,
					status: node.status,
					level: level,
					category: node // 保留原始节点引用
				})
				if (node.children && node.children.length > 0) {
					this.flattenTree(node.children, result, level + 1)
				}
			})
			return result
		},
		
		// 加载商品列表
		loadProducts() {
			this.$u.api.productManagement.list().then(res => {
				if (res && res.list) {
					this.productsList = res.list || []
					console.log('获取商品列表成功:', this.productsList)
					
					// 将商品按分类ID分组
					this.organizeProductsByCategory()
				} else {
					this.productsList = []
					this.products = {}
				}
			}).catch(err => {
				console.error('获取商品列表失败:', err)
				uni.showToast({
					title: '获取商品列表失败',
					icon: 'none'
				})
			})
		},
		
		// 将商品按分类ID组织（包含子分类的商品）
		organizeProductsByCategory() {
			this.products = {}
			
			// 获取所有分类ID（包括子分类）
			const getAllCategoryIds = (categories) => {
				let ids = []
				categories.forEach(cat => {
					ids.push(cat.id)
					if (cat.children && cat.children.length > 0) {
						ids = ids.concat(getAllCategoryIds(cat.children))
					}
				})
				return ids
			}
			const allCategoryIds = getAllCategoryIds(this.categories)
			
			// 遍历所有商品，按分类ID分组
			this.productsList.forEach(product => {
				const categoryId = product.categoryId || product.category_id
				
				if (!this.products[categoryId]) {
					this.products[categoryId] = []
				}
				
				this.products[categoryId].push({
					id: product.id,
					name: product.name || '',
					image: product.image || '',
					sold: product.sold || 0,
					stock: product.stock || 0,
					price: product.price || 0,
					description: product.description || '',
					costPrice: product.costPrice || 0,
					specification: product.specification || '',
					faceValue: product.faceValue || '',
					categoryId: product.categoryId || ''
				})
			})
			
			console.log('商品分组结果:', this.products)
		},
		
		// 切换展开/折叠
		toggleExpand(categoryId, event) {
			if (event) {
				event.stopPropagation()
			}
			this.$set(this.expandedCategories, categoryId, !this.expandedCategories[categoryId])
		},
		
		// 处理分类项点击（如果有子分类，先切换展开状态；然后选择分类）
		handleCategoryClick(category) {
			// 如果有子分类，先切换展开/折叠状态
			if (category.category && category.category.children && category.category.children.length > 0) {
				this.toggleExpand(category.id)
			}
			// 选择分类
			this.selectCategoryByItem(category)
		},
		
		selectCategory(index) {
			// 兼容旧代码：通过索引选择
			this.selectedCategory = index
			if (this.flatCategories[index]) {
				this.selectedCategoryId = this.flatCategories[index].id
			}
		},
		
		selectCategoryByItem(category) {
			// 通过分类项直接选择
			this.selectedCategoryId = category.id
			// 在 flatCategories 中查找对应的索引
			const index = this.flatCategories.findIndex(cat => cat.id === category.id)
			if (index !== -1) {
				this.selectedCategory = index
			}
		},
		
		getCurrentCategoryProducts() {
			// 如果有搜索关键词，直接搜索所有商品
			if (this.searchKeyword && this.searchKeyword.trim()) {
				const keyword = this.searchKeyword.trim().toLowerCase()
				let allProducts = []
				
				// 遍历所有分类的商品
				for (let categoryProducts of Object.values(this.products)) {
					allProducts = allProducts.concat(categoryProducts)
				}
				
				// 根据商品名称过滤
				return allProducts.filter(product => {
					const matchName = product.name && product.name.toLowerCase().includes(keyword)
					return matchName
				})
			}
			
			// 根据当前选中的分类获取对应的商品列表（包含子分类的商品）
			if (!this.selectedCategoryId) {
				return []
			}
			
			// 在 flatCategories 中查找当前选中的分类
			const currentCategory = this.flatCategories.find(cat => cat.id === this.selectedCategoryId)
			if (!currentCategory) {
				return []
			}
			
			// 获取当前分类及其所有子分类的商品
			const getAllSubCategoryIds = (categoryNode) => {
				let ids = [categoryNode.id]
				if (categoryNode.children && categoryNode.children.length > 0) {
					categoryNode.children.forEach(child => {
						ids = ids.concat(getAllSubCategoryIds(child))
					})
				}
				return ids
			}
			
			// 从树形结构中查找对应的节点
			const findNodeInTree = (nodes, targetId) => {
				for (const node of nodes) {
					if (node.id === targetId) {
						return node
					}
					if (node.children && node.children.length > 0) {
						const found = findNodeInTree(node.children, targetId)
						if (found) {
							return found
						}
					}
				}
				return null
			}
			
			const categoryNode = findNodeInTree(this.categories, this.selectedCategoryId)
			if (!categoryNode) {
				// 如果找不到，只返回当前分类的商品
				return this.products[this.selectedCategoryId] || []
			}
			
			const allCategoryIds = getAllSubCategoryIds(categoryNode)
			
			// 合并所有相关分类的商品
			let allProducts = []
			allCategoryIds.forEach(id => {
				if (this.products[id]) {
					allProducts = allProducts.concat(this.products[id])
				}
			})
			
			return allProducts
		},
		onSearchInput() {
			// 搜索输入时的处理，可以在这里添加防抖等逻辑
		},
		clearSearch() {
			this.searchKeyword = ''
		},
		getCurrentCategoryProductCount() {
			return this.getCurrentCategoryProducts().length
		},
		getTotalProductCount() {
			let total = 0
			for (let categoryProducts of Object.values(this.products)) {
				total += categoryProducts.length
			}
			return total
		},
		moveProductUp(index,id) {
			if (!this.categories[this.selectedCategory]) {
				return
			}
			
			const categoryId = this.categories[this.selectedCategory].id
			const products = this.products[categoryId]
			
			if (!products || index <= 0 || index >= products.length) {
				return
			}
			
			// 标记正在移动的商品和方向，触发动画
			this.movingProductId = products[index].id
			this.movingDirection = 'up'
			
			// 延迟执行交换，让动画播放到一半
			setTimeout(() => {
				// 交换位置
				const temp = products[index]
				this.$set(products, index, products[index - 1])
				this.$set(products, index - 1, temp)
				
				// 强制更新视图
				this.$forceUpdate()
			}, 200)
			this.changeSort(1,id)
			// 动画结束后清除标记
			setTimeout(() => {
				this.movingProductId = null
				this.movingDirection = ''
			}, 400)
		},
		moveProductDown(index,id) {
			if (!this.categories[this.selectedCategory]) {
				return
			}
			
			const categoryId = this.categories[this.selectedCategory].id
			const products = this.products[categoryId]
			
			if (!products || index < 0 || index >= products.length - 1) {
				return
			}
			
			// 标记正在移动的商品和方向，触发动画
			this.movingProductId = products[index].id
			this.movingDirection = 'down'
			
			// 延迟执行交换，让动画播放到一半
			setTimeout(() => {
				// 交换位置
				const temp = products[index]
				this.$set(products, index, products[index + 1])
				this.$set(products, index + 1, temp)
				
				// 强制更新视图
				this.$forceUpdate()
			}, 200)
			this.changeSort(-1,id)
			// 动画结束后清除标记
			setTimeout(() => {
				this.movingProductId = null
				this.movingDirection = ''
			}, 400)
		},
		changeSort(type,id) {
			this.$u.api.productManagement.changeSort({direction:type,id:id}).then(res => {
				if (res && res.result === 'true') {
					uni.showToast({
						title: type == 1 ? '上移成功' : '下移成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message || '排序失败',
						icon: 'none'
					})
				}
			}).catch(err => {
				console.error('排序失败:', err)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			})
		},
		modifyCategory() {
			const currentCategory = this.flatCategories.find(cat => cat.id === this.selectedCategoryId)
			if (currentCategory && currentCategory.category) {
				uni.navigateTo({
					url: '/pages/inventoryManagement/modifyClass?category=' + JSON.stringify(currentCategory.category)
				})
			}
		},
		addProduct() {
			const currentCategory = this.flatCategories.find(cat => cat.id === this.selectedCategoryId)
			if (currentCategory && currentCategory.category) {
				uni.navigateTo({
					url: '/pages/inventoryManagement/addProduct?category=' + JSON.stringify(currentCategory.category)
				})
			}
		},
		modifyProduct(product) {
			const currentCategory = this.flatCategories.find(cat => cat.id === this.selectedCategoryId)
			if (currentCategory && currentCategory.category) {
				uni.navigateTo({
					url: '/pages/inventoryManagement/addProduct?product=' + JSON.stringify(product)
				})
			}
		},
		hideDeleteConfirm() {
			this.showDeleteModal = false
		},
		deleteCategory() {
			//当前操作不可恢复，是否删除？
			uni.showModal({
				title: '提示',
				content: '当前操作不可恢复，是否删除？',
				success: (res) => {
					if (res.confirm) {
						this.confirmDelete()
					}
				}
			})
		},
		confirmDelete() {
			const currentCategory = this.flatCategories.find(cat => cat.id === this.selectedCategoryId)
			if (!currentCategory || !currentCategory.id) {
				uni.showToast({
					title: '分类信息错误',
					icon: 'none'
				})
				return
			}
			
			uni.showLoading({ title: '删除中...' })
			
			const params = {
				id: currentCategory.id
			}
			
			this.$u.api.productCategory.delete(params).then(res => {
				uni.hideLoading()
				
				if (res && res.result === 'true') {
					uni.showToast({
						title: res.message || '删除成功',
						icon: 'success'
					})
					
					// 重新加载分类列表
					this.loadCategories()
					
					// 如果删除的是当前选中的分类，重置选中状态
					const deletedIndex = this.flatCategories.findIndex(cat => cat.id === currentCategory.id)
					if (deletedIndex !== -1) {
						const newIndex = Math.max(0, Math.min(deletedIndex, this.flatCategories.length - 2))
						if (this.flatCategories[newIndex]) {
							this.selectedCategory = newIndex
							this.selectedCategoryId = this.flatCategories[newIndex].id
						}
					}
				} else {
					uni.showToast({
						title: res.message || '删除失败',
						icon: 'none'
					})
				}
			}).catch(err => {
				uni.hideLoading()
				console.error('删除分类失败:', err)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			})
		},
		goToCategoryManagement() {
			uni.navigateTo({
				url: '/pages/inventoryManagement/classManagement'
			})
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
}


/* 搜索框 */
.search-bar {
	padding: 10px 15px;
	background-color: #ffffff;
	border-bottom: 1px solid #f0f0f0;
}

.search-input-wrapper {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 20px;
	padding: 8px 15px;
}

.search-icon {
	font-size: 16px;
	color: #999999;
	margin-right: 8px;
}

.search-input {
	flex: 1;
	font-size: 14px;
	color: #333333;
	background-color: transparent;
}

.clear-icon {
	font-size: 14px;
	color: #999999;
	margin-left: 8px;
	padding: 2px 4px;
}

/* 主要内容区域 */
.main-content {
	flex: 1;
	display: flex;
	background-color: #ffffff;
	padding-bottom: 60px;
	min-height: calc(100vh - 110px);
	max-height: calc(100vh - 110px);
	overflow: hidden;
}

/* #ifdef APP-PLUS */
.main-content {
	min-height: calc(100vh - 50px);
	max-height: calc(100vh - 50px);
}
/* #endif */

/* 左侧分类列表 */
.category-sidebar {
	width: 25%;
	background-color: #F6F6F6;
	border-right: 1px solid #f0f0f0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	flex-shrink: 0;
}

.category-item {
	position: relative;
	padding: 20px 15px;
	border-bottom: 1px solid #f8f8f8;
	transition: background-color 0.2s ease;
}

.category-item.active {
	background-color: #fff;
	border-right: none;
	position: relative;
	z-index: 1;
	/* border-top-right-radius: 15px; */
	/* border-bottom-right-radius: 15px; */
	/* margin-right: -15px; */
}

.category-content {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-direction: row;
}

.category-name {
	font-size: 12px;
	color: #333333;
	flex: 1;
	display: inline-block;
	white-space: nowrap;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
}

.category-item.active .category-name {
	color: #ff4069;
	font-weight: 500;
}

/* 右侧商品区域 */
.product-area {
	flex: 1;
	background-color: #ffffff;
	padding: 10px;
	position: relative;
	margin-left: -1px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}

.category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	margin-bottom: 10px;
}

.category-title-section {
	display: block;
}

.current-category {
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}

.edit-icon {
	font-size: 10px;
	color: #ff4069;
}

.count-text {
	font-size: 10px;
	color: #666666;
}

/* 商品列表 */
.product-list {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	margin-bottom: 10px;
}

.product-item {
	display: flex;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid #f8f8f8;
	position: relative;
}

/* 移动动画效果 */
.product-item.moving {
	z-index: 10;
}

/* 上移动画 - 平滑向上移动 */
.product-item.moving-up {
	animation: moveUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 下移动画 - 平滑向下移动 */
.product-item.moving-down {
	animation: moveDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes moveUp {
	0% {
		transform: translateY(0);
		background-color: #ffffff;
		box-shadow: none;
	}
	50% {
		transform: translateY(-60px);
		background-color: #fff8fa;
		box-shadow: 0 4px 12px rgba(255, 64, 105, 0.2);
	}
	100% {
		transform: translateY(0);
		background-color: #ffffff;
		box-shadow: none;
	}
}

@keyframes moveDown {
	0% {
		transform: translateY(0);
		background-color: #ffffff;
		box-shadow: none;
	}
	50% {
		transform: translateY(60px);
		background-color: #fff8fa;
		box-shadow: 0 4px 12px rgba(255, 64, 105, 0.2);
	}
	100% {
		transform: translateY(0);
		background-color: #ffffff;
		box-shadow: none;
	}
}

.product-image {
	width: 70px;
	height: 70px;
	border-radius: 8px;
	margin-right: 5px;
	background-color: #f0f0f0;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 12px;
	color: #000000;
	font-weight: bold;
	margin-bottom: 8px;
	display: block;
}

.product-stats {
	font-size: 10px;
	color: #666666;
	margin-bottom: 8px;
	display: block;
}

.product-costPrice {
	font-size: 10px;
	color: #666666;
	display: block;
	text-decoration: line-through;
}

.product-specification {
	font-size: 8px;
	line-height: 12px;
	color: #666666;
}
.product-price {
	font-size: 12px;
	color: #ff4069;
	font-weight: bold;
}

.product-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.action-btn {
	padding: 0 2px;
	background-color: #f8f8f8;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	text-align: center;
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.action-btn:active {
	background-color: #ff4069;
	border-color: #ff4069;
	transform: scale(0.95);
}

.action-btn:active .btn-text {
	color: #ffffff;
}

.btn-text {
	font-size: 10px;
	color: #666666;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	white-space: nowrap;
	display: inline-block;
}

/* 添加商品按钮 */
.add-product-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 5px;
	width: 100px;
	height: 30px;
	background-color: #F6F6F6;
	border-radius: 5px;
	margin: 0 auto;
	flex-shrink: 0;
}

.add-icon {
	font-size: 12px;
	color: #C5C5C5;
	font-weight: bold;
}

.add-text {
	font-size: 12px;
	color: #C5C5C5;
}

/* 底部操作按钮 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 10px 20px;
	gap: 15px;
	background-color: #ffffff;
	border-top: 1px solid #f0f0f0;
	z-index: 100;
}

.action-btn-left {
	flex: 1;
	height: 35px;
	background-color: #F6F6F6;
	border: 1px solid #F6F6F6;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.action-btn-right {
	flex: 1;
	height: 35px;
	background-color: #ff4069;
	border: 1px solid #ff4069;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.action-btn-left .action-text {
	font-size: 14px;
	color: #ff4069;
}

.action-btn-right .action-text {
	font-size: 14px;
	color: #ffffff;
}

/* 加载状态 */
.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px 15px;
}

.loading-text {
	color: #999999;
	font-size: 12px;
}

/* 空状态 */
.empty-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px 15px;
}

.empty-text {
	color: #999999;
	font-size: 12px;
}

/* 无分类提示 */
.no-category-tip {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
}

.tip-text {
	color: #999999;
	font-size: 14px;
}

/* 底部指示器 */
.home-indicator {
	position: fixed;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	background-color: #000000;
	border-radius: 2px;
}
</style>
